<template>
	<div class="containerR">
		<div class="TopR">
			{{title}}
		</div>
		<div class="mainR">
			<keep-alive>
				<component :is="currentComponent"></component>
				<el-empty description="暂无渲染组件"></el-empty>
			</keep-alive>
		</div>
	</div>
</template>
<script>
	import EventHandler from "../assets/EventHandler";
	export default {
		name: "RightMain",
		data() {
			return {
				title: "组件内容显示区域",
				currentComponent: "",
				cmps: [],
			};
		},
		created() {
			// 模拟后端请求到的数据
			this.cmps = [
				{
					name: "ComponentA",
					type: ".vue",
				},
				{
					name: "ComponentB",
					type: ".vue",
				},
				{
					name: "ComponentC",
					type: ".vue",
				},
				{
					name: "ComponentD",
					type: ".vue",
				},
				{
					name: "ComponentE",
					type: ".vue",
				},
			];
			// 循环遍历，动态注册组件
			this.cmps.forEach((item) => {
				this.$options.components[item.name] = () =>
					import("@/components/" + item.name + item.type);
			});
		},
		mounted() {
			// 改变 currentComponent 值，更改当前组件
			EventHandler.$on("setValue", (value) => {
				this.currentComponent = value;
			});
		},
	};
</script>
<style lang="css" scoped>
	.containerR {
		width: 100%;
		height: 460px;
		background: #e4e7ed;
	}
	.TopR {
		width: 100%;
		height: 40px;
		border-top: 1px solid white;
		text-align: center;
		line-height: 40px;
		background: #c0c4cc;
		border-left: 1px solid white;
		font-size: 18px;
	}
	.mainR {
		width: 100%;
		height: 420px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}
</style>